<template>
  <section class="main">
    <!-- <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-global"></i> {{$t('i18n.breadcrumb')}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <span>{{$t('i18n.tips')}}</span>
            <el-button type="primary" @click="$i18n.locale = $i18n.locale === 'zh'?'en':'zh';">{{$t('i18n.btn')}}</el-button>
            <div class="list">
            <h2>{{$t('i18n.title1')}}</h2>
                <p>{{$t('i18n.p1')}}</p>
                <p>{{$t('i18n.p2')}}</p>
                <p>{{$t('i18n.p3')}}</p>
            </div>
        </div> -->

    <div id="container"></div>
    <input
      class="info"
      type="text"
      id="suggestId"
      size="20"
      value="百度"
      style="width: 150px"
    />
	<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
    <!-- <div class="info">返回北京市“景点”关键字的检索结果，并展示在地图上</div> -->
  </section>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    init() {
      var map = new BMapGL.Map("container"); // 创建Map实例
      var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
      map.centerAndZoom(point, 10);
      map.enableScrollWheelZoom(); // 启用滚轮放大缩小


      
      var output = "从西单到上地驾车需要";
        var searchComplete = function (results){
            if (transit.getStatus() != BMAP_STATUS_SUCCESS){
                return ;
            }
            var plan = results.getPlan(0);
            output += plan.getDuration(true) + "\n";                //获取时间
            output += "总路程为：" ;
            output += plan.getDistance(true) + "\n";             //获取距离
        }
        var transit = new BMapGL.DrivingRoute(map, {renderOptions: {map: map},
            onSearchComplete: searchComplete,
            onPolylinesSet: function(){        
                setTimeout(function(){alert(output)},"1000");
        }});
        var start=new BMapGL.Point(116.404844,39.911836);
        var end=new BMapGL.Point(116.308102,40.056057);
        transit.search(start, end);


        
      var p1 = new BMapGL.Point(116.301934,39.977552);
        var p2 = new BMapGL.Point(116.508328,39.919141);

        var driving = new BMapGL.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
        driving.search(p1, p2);



      var ac = new BMap.Autocomplete({ input: "suggestId", location: map }); //建立一个自动完成的对象

      ac.addEventListener("onhighlight", function (e) {
        //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
          value =
            _value.province +
            _value.city +
            _value.district +
            _value.street +
            _value.business;
        }
        str =
          "FromItem<br />index = " +
          e.fromitem.index +
          "<br />value = " +
          value;

        value = "";
        if (e.toitem.index > -1) {
          _value = e.toitem.value;
          value =
            _value.province +
            _value.city +
            _value.district +
            _value.street +
            _value.business;
        }
        str +=
          "<br />ToItem<br />index = " +
          e.toitem.index +
          "<br />value = " +
          value;
        G("searchResultPanel").innerHTML = str;
      });

      var myValue;
      ac.addEventListener("onconfirm", function (e) {
        //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue =
          _value.province +
          _value.city +
          _value.district +
          _value.street +
          _value.business;
        G("searchResultPanel").innerHTML =
          "onconfirm<br />index = " +
          e.item.index +
          "<br />myValue = " +
          myValue;

        map.clearOverlays(); //清除地图上所有覆盖物

        var local = new BMap.LocalSearch(map, {
          //智能搜索
          onSearchComplete: function () {
            var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp)); //添加标注
          },
        });
        local.search(myValue);
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
  },
};
</script>

<style scoped>
/* .list{
    padding: 30px 0;
}
.list p{
    margin-bottom: 20px;
}
a{
    color: #409eff;
} */
body,
html,
#container {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  margin: 0;
  font-family: "微软雅黑";
}
.info {
  z-index: 999;
  width: auto;
  min-width: 22rem;
  padding: 0.75rem 1.25rem;
  margin-left: 1.25rem;
  position: fixed;
  top: 1rem;
  background-color: #fff;
  border-radius: 0.25rem;
  font-size: 14px;
  color: #666;
  box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
}
</style>
